<template>
  <div class="bottom-nav">
    <ul>
      <li :class="{active:(curHref.indexOf(list.href) >=0) ? true : (curIndex === index && index === 0 && (curHref.indexOf('cart.html') ==-1)? true : false)}" 
      v-for="(list,index) in navConfig"
      :key="list.index"
      @click="changeNav(list,index)"
      >
        <a>
          <i :class="list.icon"></i>
          <div>{{ list.name }}</div>
        </a>
      </li>
    </ul>
  </div>
</template>

<script>
import qs from 'qs'
let {index} = qs.parse(location.search.substr(1))
//主要是取到index的值，qs.parse('?index=1&name=tony') 这个是插件 要去掉这个问号‘？’
//{ index } = xxx 对象的解构赋值,如果不加{}，index就是个对象
console.log(index)
let navConfig = [{
  name: '有赞',
  icon: 'icon-home',
  href: 'index.html',
  index: 0
},{
  name: '分类',
  icon: 'icon-category',
  href: 'category.html',
  index: 1
},{
  name: '购物车',
  icon: 'icon-cart',
  href: 'cart.html',
  index: 2
},{
  name: '我',
  icon: 'icon-user',
  href: 'member.html',
  index: 3
}]

export default {
  data() {
    return {
      navConfig,
      curIndex: parseInt(index) || 0,
      curHref: location.pathname
    }
  },
  methods: {
    changeNav(list,index){
      location.href = `${list.href}?index=${index}`
    }
  }
}
</script>

<style scoped>
.bottom-nav {
  position: fixed;
  width: 100%;
  height: 50px;
  bottom: 0;
  background-color: #fff;
  z-index: 8;
  -o-border-image: url(https://b.yzcdn.cn/v2/image/wap/border-line-2.png) 2
    stretch;
  border-image: url(https://b.yzcdn.cn/v2/image/wap/border-line-2.png) 2 stretch;
  border-top: 2px solid #e5e5e5;
}

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
  only screen and (min--moz-device-pixel-ratio: 1.5),
  only screen and (min-device-pixel-ratio: 1.5) {
  .bottom-nav {
    border-top-width: 1px;
    z-index: 999;
  }
}

.bottom-nav ul {
  position: relative;
  height: 100%;
  zoom: 1;
}

.bottom-nav ul:after {
  content: "";
  display: table;
  clear: both;
}

.bottom-nav li {
  display: block;
  float: left;
  width: 25%;
  height: 100%;
}

.bottom-nav a {
  display: block;
  width: 100%;
  height: 100%;
  padding-top: 8px;
  text-align: center;
  font-size: 10px;
}

.bottom-nav [class^="icon-"] {
  display: block;
  width: 22px;
  height: 22px;
  margin: auto;
  margin-bottom: 4px;
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: 100% auto;
}

.bottom-nav .icon-home {
  background-image: url("");
}

.bottom-nav .icon-category {
  background-image: url("");
}

.bottom-nav .icon-cart {
  background-image: url("");
}

.bottom-nav .icon-user {
  background-image: url("");
}

.bottom-nav .active a {
  color: #ff6366;
}

.bottom-nav .active .icon-home {
  background-image: url("");
}

.bottom-nav .active .icon-category {
  background-image: url("");
}

.bottom-nav .active .icon-cart {
  background-image: url("");
}

.bottom-nav .active .icon-user {
  background-image: url("");
}
</style>
